<template>
    <a-button class="add-button" @click="showModal">新增</a-button>
    <a-table :columns="columns" :data-source="data">
        <template #name="{ text }">
            <a>{{ text }}</a>
        </template>
        <template #customTitle>
            <span>
                <smile-outlined />
                名字
            </span>
        </template>
        <template #tags="{ text: tags }">
            <span>
                <a-tag v-for="tag in tags" :key="tag"
                    :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'">
                    {{ tag.toUpperCase() }}
                </a-tag>
            </span>
        </template>
        <template #action="{ record }">
            <span>
                <a @click="showUpdateModal(record)">修改</a>
                <a-divider type="vertical" />
                <a @click="showUpdateModal(record)">删除</a>
                <a-divider type="vertical" />
                <a class="ant-dropdown-link">
                    更多
                    <down-outlined />
                </a>
            </span>
        </template>
    </a-table>

    <!-- 添加的模态框 -->
    <div>
        <a-modal title="新增部门" v-model:visible="visible" :confirm-loading="confirmLoading" @ok="handleOk" @click="resetForm()">
            <div>
                <a-form ref="formRef" :model="formState" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
                    <a-form-item label="部门名称" :name="deptName">
                        <a-input v-model:value="formState.deptName" />
                    </a-form-item>
                    <a-form-item label="部门编码" :name="deptCode">
                        <a-input v-model:value="formState.deptCode" />
                    </a-form-item>
                    <a-form-item label="部门级别" :name="deptLevel">
                        <a-input v-model:value="formState.deptLevel" />
                    </a-form-item>
                    <a-form-item label="排序" :name="sort">
                        <a-input v-model:value="formState.sort" />
                    </a-form-item>
                    <a-form-item label="上级部门" :name="deptParent">
                        <a-input v-model:value="formState.deptParent" />
                    </a-form-item>
                </a-form>
            </div>
        </a-modal>
    </div>

    <!-- 修改的模态框 -->
    <div>
        <a-modal title="修改部门" v-model:visible="visibleUpdate" :confirm-loading="confirmLoadingUpdate" @ok="handleOkUpdate" @click="resetUpdateForm()">
            <div>
                <a-form ref="formRef" :model="formState" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
                    <a-form-item label="部门名称" :name="deptName">
                        <a-input v-model:value="formState.deptName" />
                    </a-form-item>
                    <a-form-item label="部门编码" :name="deptCode">
                        <a-input v-model:value="formState.deptCode" />
                    </a-form-item>
                    <a-form-item label="部门级别" :name="deptLevel">
                        <a-input v-model:value="formState.deptLevel" />
                    </a-form-item>
                    <a-form-item label="排序" :name="sort">
                        <a-input v-model:value="formState.sort" />
                    </a-form-item>
                    <a-form-item label="上级部门" :name="deptParent">
                        <a-input v-model:value="formState.deptParent" />
                    </a-form-item>
                </a-form>
            </div>
        </a-modal>
    </div>

</template>



<script lang="ts" setup>
import { SmileOutlined, DownOutlined } from '@ant-design/icons-vue';
import axios from 'axios';
import { defineComponent, ref, toRaw, reactive } from 'vue';
import { useRoute } from 'vue-router';


const modalText = ref<string>('Content of the modal');
// 定义显示模态框的 boolean字段
const visible = ref<boolean>(false);
const visibleUpdate = ref<boolean>(false);
const confirmLoading = ref<boolean>(false);
const confirmLoadingUpdate = ref<boolean>(false);

// 模态框显示
const showModal = () => {
    visible.value = true;
};

// 模态框显示
const showUpdateModal = (record) => {
    visibleUpdate.value = true;
    formState = record;
    axios({
        method: 'post',
        url: 'http://localhost:18086/core/deptController/getDepartmentByWhere',
        data: {
            // id: id
        }
    }).then(res => {
        if (res.data.code === "200") {
            console.log(res.data.data);
        }
    })
};

// 模态框点击 OK之后，才会消失
const handleOk = () => {
    axios({
        method: 'post',
        url: 'http://localhost:18086/core/deptController/insertDepartment',
        data: formState
    }).then(res => {
        if (res.data.code === "200") {
            visible.value = false;
            confirmLoading.value = false;
        }
    })
}

// 修改的模态框
const handleOkUpdate = () =>{
    axios({
        method: 'post',
        url: 'http://localhost:18086/core/deptController/updateDepartment',
        data: formState
    }).then(res => {
        if (res.data.code === "200") {
            visibleUpdate.value = false;
            confirmLoadingUpdate.value = false;
        }
    })
}

// 定义 列表字段
const columns = [
    {
        dataIndex: 'deptName',
        key: 'deptName',
        slots: { title: 'customTitle', customRender: 'deptName' },
    },
    {
        title: '部门编码',
        dataIndex: 'deptCode',
        key: 'deptCode',
    },
    {
        title: '上级部门',
        dataIndex: 'deptParent',
        key: 'deptParent',
    },
    {
        title: '部门级别',
        key: 'deptLevel',
        dataIndex: 'deptLevel',
        slots: { customRender: 'deptLevel' },
    },
    {
        title: '操作',
        key: 'action',
        slots: { customRender: 'action' },
    },
];

let data: any = ref([]);

const route = useRoute();
// console.log(route.query);
getUserInfo();

// 定义一个方法/函数 
function getUserInfo() {
    axios({
        method: 'post',
        url: 'http://localhost:18086/core/deptController/getDepartmentList',
        data: {
            page: 1,
            pageSize: 20
        },
        headers: {
            token: route.query.token
        }
    }).then(res => {
        if (res.data.code === "200") {
            console.log(res.data.data);
            data.value = res.data.data.list;
        }
    })
};

const formRef = ref();
// 定义提交的表单字段
let formState = reactive({
    deptName: undefined,
    deptCode: undefined,
    deptLevel: undefined,
    sort: undefined,
    deptParent: undefined,
    id: undefined
});
// 定义表单字段规则
const rules = {
    deptName: {
        required: true,
        message: 'Please input name',
    },
    deptCode: {
        required: true,
        message: 'Please input name',
    },
};

// 可以把所有的字段都清空
const resetForm = () => {
    formRef.value.resetFields();
};



</script>

<style scoped>
.add-button {
    margin-bottom: 1%;
}
</style>